<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="resources/js/jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
	$(function() {
		$('#dniCliente').on('input paste',function(event){       
		if(event.type=='input'){			
			var pattern =/^[0-9]+$/;
			var t = pattern.test($(this).val());			
			if(!t){
				$('#dniCliente').val('');
			} else {
				$('#dniCliente').val($(this).val());
			}			
		}
		});
		
		$('#dniAsesor').on('input paste',function(event){       
		if(event.type=='input'){			
			var pattern =/^[0-9]+$/;
			var t = pattern.test($(this).val());			
			if(!t){
				$('#dniAsesor').val('');
			} else {
				$('#dniAsesor').val($(this).val());
			}			
		}
		});
		
		$('#apellidoPaterno').on('input paste',function(event){       
			if(event.type=='input'){			
				var pattern =/^[a-zA-Z]+$/;	
				var t = pattern.test($(this).val());				
				if(!t){
					$('#apellidoPaterno').val('');										
				} else {
					$('#apellidoPaterno').val($(this).val());					
				}			
			}
		});
		$('#apellidoMaterno').on('input paste',function(event){       
			if(event.type=='input'){			
				var pattern =/^[a-zA-Z]+$/;	
				var t = pattern.test($(this).val());				
				if(!t){					
					$('#apellidoMaterno').val('');					
				} else {					
					$('#apellidoMaterno').val($(this).val());					
				}			
			}
		});
		$('#nombresCliente').on('input paste',function(event){       
			if(event.type=='input'){			
				var pattern =/^[a-z A-Z]+$/;	
				var t = pattern.test($(this).val());				
				if(!t){					
					$('#nombresCliente').val('');										
				} else {					
					$('#nombresCliente').val($(this).val());					
				}			
			}
		});
		$('#proceso').on('input paste',function(event){       
			if(event.type=='input'){			
				var pattern =/^[a-zA-Z]+$/;	
				var t = pattern.test($(this).val());				
				if(!t){					
					$('#proceso').val('');											
				} else {					
					$('#proceso').val($(this).val());										
				}			
			}
		});
		
		$('#vdn').on('input paste',function(event){       
			if(event.type=='input'){			
				var pattern =/^[0-9a-zA-Z]+$/;	
				var t = pattern.test($(this).val());				
				if(!t){
					$('#vdn').val('');				
				} else {
					$('#vdn').val($(this).val());					
				}			
			}
		});
		
		$('#skill').on('input paste',function(event){       
			if(event.type=='input'){			
				var pattern =/^[0-9a-zA-Z]+$/;	
				var t = pattern.test($(this).val());				
				if(!t){					
					$('#skill').val('');										
				} else {					
					$('#skill').val($(this).val());
					
				}			
			}
		});
		
		
	});
	
  
  function doAjaxPost(path,codEmpresa) {        
			 $.ajax({
        type: "POST",
        url: "/telebusca/escuchar",        
        data: "path=" + path + "&codEmpresa=" + codEmpresa,        
        success: function(response){
        // we have the response
		var cad = response+"?escuchar=true";
					
			$('.inner').empty();
			var cadena = "<br/><div class=\"contenedor\"><audio preload=\"auto\" autobuffer	controls id=\"canciones\"><source src=\""+cad+"\" /> </audio>";			
			
			$( ".inner" ).append(cadena);
			$('.error').empty();
			if (cad.search("http") != 0){				
				$( ".error" ).append("<center><font color=\"red\">Error al reproducir audio.</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center>");
			}
			
			
			
        },
        error: function(e){
        alert('Error: ' + e);
        }
        });
		return false;
		}
       
        </script>
        <script type="text/javascript">
		
		
		$(function() {
			$('#dniCliente').on('keyup', function() {
			if ($('input:radio[name=sex]:checked').val() == 'dni'){				
				limitText(this, 8)
				
			}
			if ($('input:radio[name=sex]:checked').val() == 'pass'){			
				limitText(this, 12)
				
			}
			if ($('input:radio[name=sex]:checked').val() == 'ext'){			
				limitText(this, 15)
				
			}			
			});
		});
		function limitText(field, maxChar){
		    var ref = $(field),
		        val = ref.val();
		    if ( val.length >= maxChar ){
		        ref.val(function() {
		            console.log(val.substr(0, maxChar))
		            return val.substr(0, maxChar);       
		        });
		    }
		}
 </script>


<script type="text/javascript">

	$( window ).load(function() {  
		$('input:radio[name=sex]:nth(0)').attr('checked',true);		
	});

	
	
	
	function validate(e){
		var key_code = (document.all) ? e.keyCode : e.which;
		pattern =/^[0-9]+$/;				
		if(key_code == 8 || key_code == 0){
			return true;
		} else {
			key_value = String.fromCharCode(key_code);
		}
		return pattern.test(key_value);
	}
	
	function validateA(e){
		var key_code = (document.all) ? e.keyCode : e.which;
		pattern =/^[a-zA-Z]+$/;				
		
		if(key_code == 32){
			return false;
		}
		
		if(key_code == 8 || key_code == 0){
			return false;
		} else {
			key_value = String.fromCharCode(key_code);
		}
		return pattern.test(key_value);
	}
	
	function validateC(e){
		var key_code = (document.all) ? e.keyCode : e.which;
		pattern =/^[a-z A-Z]+$/;				
		
		if(key_code == 8 || key_code == 0){
			return false;
		} else {
			key_value = String.fromCharCode(key_code);
		}
		return pattern.test(key_value);
	}
	
	function validateB(e){
		var key_code = (document.all) ? e.keyCode : e.which;
		pattern =/^[0-9a-zA-Z]+$/;				
		
		if(key_code == 32){
			return false;
		}
		
		if(key_code == 8 || key_code == 0){
			return false;
		} else {
			key_value = String.fromCharCode(key_code);
		}
		return pattern.test(key_value);
	}

	
	
	function validarBuscar(dias){
			
		var re=/([\d]+){4}[^\d]*([\d]+){1,2}[^\d]*([\d]+){1,2}/;		
		var fechaInicial = document.getElementById("fechaInicial").value;
		var fechaFinal = document.getElementById("fechaFinal").value;
		var horaInicial = document.getElementById("timepicker_start").value;
		var horaFinal = document.getElementById("timepicker_end").value;
		
		var dnicliente = document.getElementById("dniCliente").value;
		var dniAsesor = document.getElementById("dniAsesor").value;
			
		if (fechaInicial == ""){
			alert('Ingrese fecha inicial.');
			return false;
		}
		
		if (fechaFinal == ""){
			alert('Ingrese fecha final.');
			return false;
		}
		if (horaInicial == ""){
			alert('Ingrese hora inicial.');
			return false;
		}
		if (horaFinal == ""){
			alert('Ingrese hora final.');
			return false;
		}

	


		
		if ($('input:radio[name=sex]:checked').val() == 'dni'){
			if (dnicliente != ""){
				if (dnicliente.length != 8){
					alert('DNI Cliente debe tener 8 numeros.');
					return false;
				}				
			}		
		}		
		if (dniAsesor != ""){
			if (dniAsesor.length != 8){
				alert('DNI Asesor debe tener 8 numeros.');
				return false;
			}
			
		}
					
		if(re.test(fechaInicial) && re.test(fechaFinal)){
			var data1=re.exec(fechaInicial);			
			var data2=re.exec(fechaFinal);
			var year=parseInt(data1[1]);
		    var month=(data1[2]*1)-1;
		    var date=(data1[3])*1;
		    var d1=new Date(year, month, date, 0, 0, 0, 0);		      
		    var year=parseInt(data2[1]);
		    var month=(data2[2]*1)-1;
		    var date=(data2[3])*1;
		    var d2=new Date(year, month, date, 0, 0, 0, 0);		    
		    var mea=1000*60*60*24;		    		    			
		    var t3=d2-d1;			
		    //t3= parseInt((""+t3).replace("-",""))/mea;			
			t3= parseInt(""+t3)/mea;			
		}						
		
		if (t3 < 0){
			alert("La Fecha de Venta Inicial no debe ser mayor que la Fecha de Venta Final");
			return false;
		}
		
		if ( t3 > parseInt(dias)){
			alert("La diferencia entre la Fecha Venta Final y la Fecha Venta Inicial tiene que ser menor a " + dias);
			return false;				
		}
		var horaI = horaInicial.split(':');
		var horaF = horaFinal.split(':');
		
		var horaA = parseInt(horaI[0]+horaI[1]);
		var horaB = parseInt(horaF[0]+horaF[1]);
		if(t3 == 0){
			if(horaA > horaB){
				alert("La Hora Venta Inicial no debe ser mayor a la Hora Venta Final.");
				return false;
			}
		}

				
		return true;		
		
		
		
		
	}
	
	
	
	
  </script>

</head>
<body >	

<c:url value="/buscaraudios" var="buscaraudios" />

<div id="content">
	
	<c:if test="${error != null}">
		<font color="red"><c:out value="${error}"></c:out>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;</font>
	</c:if> 
<form:form commandName="audio" action="${buscaraudios}" method="get"
	id="f" name="f">
	<center>
	<div class="error"> </div>	
	</center>
	<div id="cuadrocuerpo">
		
		<div class="cabeceratitulo"><spring:message
		code='consultaraudios' /></div></div>


	<div >
	<div class="tablaimportar" title="<spring:message
		code='criteriosprincipales' />">
	<table>
		<tr>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td><spring:message code='fechainicial' /></td>
			<td><form:input path="fechaInicial" id="fechaInicial" onkeypress="return false;"  oncopy="return false;" onpaste="return false;" /> <a
				href="javascript:;"> <img name="fdate" id="fdate" border="0"
				src="resources/imagenes/calendar/cal2.gif" align="bottom" hspace="2"
				onclick="displayCalendar(document.f.fechaInicial,'yyyy-mm-dd',this)" />
			</a></td>
			<td><spring:message code='horainicial' /></td>
			<td><form:input path="horaInicial" id="timepicker_start" onkeypress="return false;"  oncopy="return false;" onpaste="return false;" /></td>



		</tr>
		<tr>
			<td><spring:message code='fechafinal' /></td>
			<td><form:input path="fechaFinal" id="fechaFinal" onkeypress="return false;" oncopy="return false;" onpaste="return false;" /> <a
				href="javascript:;"> <img name="fdate" id="fdate" border="0"
				src="resources/imagenes/calendar/cal2.gif" align="bottom" hspace="2"
				onclick="displayCalendar(document.f.fechaFinal,'yyyy-mm-dd',this)" />
			</a></td>
			<td><spring:message code='horafinal' /></td>
			<td><form:input path="horaFinal" id="timepicker_end" onkeypress="return false;" oncopy="return false;" onpaste="return false;" /></td>
		</tr>
	</table>
	</div>



	<div class="tablaimportar" title="<spring:message
		code='criteriossecundarios' />">
	<table>
		<tr>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td colspan="5">
				<input type="radio" name="sex" value="dni">DNI</input>
				<input type="radio" name="sex" value="pass">Pasaporte</input>
				<input type="radio" name="sex" value="ext">Carnet Extranjeria</input>
			</td>
		</tr>
		<tr>
			<td><spring:message code='dnicliente' /></td>
			<td><form:input path="dniCliente" id="dniCliente"
				onkeypress="return validate(event);"  /></td>
			<td><spring:message code='empresa' /></td>
			<td><form:select path="codEmpresa">
				<form:option label="-- Seleccionar --" value="0" />
				<form:options items="${empresas}" itemLabel="nombreEmpresa"
					itemValue="codEmpresa" />
			</form:select></td>
		</tr>
		<tr>
			<td><spring:message code='apellidopaterno' /></td>
			<td><form:input id="apellidoPaterno" path="apellidoPaterno" onkeypress="return validateA(event);" /></td>
			<td><spring:message code='apellidomaterno' /></td>
			<td><form:input path="apellidoMaterno" id="apellidoMaterno" onkeypress="return validateA(event);" /></td>
		</tr>
		<tr>
			<td><spring:message code='telefonocliente' /></td>
			<td><form:input path="telefonoNumeroCliente" id="telefonoNumeroCliente" onkeypress="return validate(event);"  maxlength="9"/></td>
			<td><spring:message code='nombrescliente' /></td>
			<td><form:input path="nombresCliente" id="nombresCliente" onkeypress="return validateC(event);"  /></td>
		</tr>
		<tr>
			<td><spring:message code='proceso' /></td>
			<td><form:input id="proceso" path="proceso" onkeypress="return validateA(event);"  /></td>
			<td><spring:message code='dniasesor' /></td>
			<td><form:input id="dniAsesor" path="dniAsesor" onkeypress="return validate(event);"  maxlength="8" /></td>
		</tr>
		<tr>
			<td><spring:message code='vdn' /></td>
			<td><form:input path="vdn" id="vdn" onkeypress="return validateB(event);"   maxlength="10"/></td>
			<td><spring:message code='skill' /></td>
			<td><form:input id="skill" path="skill" onkeypress="return validateB(event);" maxlength="10"/></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td><input type="image" name="ImgInvocar" id="ImgInvocar"
				class="imgButton" src="resources/imagenes/buscar.png" border="0" onclick="return validarBuscar('${rangodias}');"/></td>
			<td><input type="image" name="ImgInvocar" id="ImgInvocar"
				class="imgButton" src="resources/imagenes/nuevabusqueda.png"
				border="0" onclick="this.form.reset()" /></td>
		</tr>		
	</table>
	<table>
	<tr>
			<td colspan="4">
				<center>
				<c:if test="${mensaje != null}">
					<c:out value="${mensaje}"></c:out>
				</c:if>
				</center>
			</td>
		</tr>	
		</table>
	</div>
</div>


</form:form> 




<c:if test="${fn:length(listaaudios) > 0}">
	<div style="overflow: scroll; width: 80%; height: 310px;">
	<table width="10px" align="center" cellpadding="1" cellspacing="0"
		class="gridtable" border="1">
		<tr>
			<td align="center">
			
			<display:table id="test" name="listaaudios"
				pagesize="${maxNumber}" requestURI="${buscaraudios}">
				
				<c:forEach items="${empresasnombres}" var="entry">					
					<c:if test="${entry.codEmpresa eq test.codEmpresa}">
						<display:column value="${entry.nombreEmpresa}" title="Empresa" />						
    				</c:if>					
				</c:forEach>
				
				
				
				
				<display:column property="dniCliente" title="DNI Cliente" />
				<display:column property="apellidoPaterno"
					title="Ape. Paterno Cliente" />
				<display:column property="apellidoMaterno"
					title="Ape. Materno Cliente" />
				<display:column property="nombresCliente" title="Nombres Cliente" />
				<display:column property="telefonoNumeroCliente"
					title="Telefono Cliente" />
				<display:column property="fechaVenta" title="Fecha de venta" format="{0,date,dd/MM/yyyy}" >
				</display:column>
				<display:column property="fechaVenta" title="Hora de venta" format="{0,time,HH:mm:ss}">
				</display:column>
				<display:column property="dniAsesor" title="DNI asesor" />
				<display:column property="vdn" title="VDN" />
				<display:column property="proceso" title="Proceso" />
				<display:column property="skill" title="Skill" />
				<sec:authorize access="hasRole('GS - TeleBusca - Descargar Audio')">
					<display:column title="Descargar" media="html">
						<c:url value="/descargarAudio" var="descargarAudio">
							<c:param name="codEmpresa" value="${test.codEmpresa}" />
							<c:param name="path" value="${test.rutaAudio}" />
						</c:url>
						<a href="${descargarAudio}"> <input type="image"
							name="ImgInvocar" id="ImgInvocar" class="imgButton"
							src="resources/imagenes/descargar.png" border="0" /> </a>
					</display:column>
				</sec:authorize>	
				<sec:authorize access="hasRole('GS - TeleBusca - Escuchar Audio')">
					<display:column title="Escuchar" media="html">
						<c:url value="/escucharaudio" var="escucharaudio">
							<c:param name="codEmpresa" value="${test.codEmpresa}" />
							<c:param name="path" value="${test.rutaAudio}" />							
						</c:url>
						<a href="#" onclick="return doAjaxPost('${test.rutaAudio}','${test.codEmpresa}');"> <input type="image"
							name="ImgInvocar" id="ImgInvocar" class="imgButton"
							src="resources/imagenes/escuchar.png" border="0" /> </a>
					</display:column>
				</sec:authorize>

			</display:table>
			
			</td>
		</tr>
	</table>

	</div>
	<div class="inner">
					
	</div>
</c:if></div>


</body>
</html>